const path = require('path');
const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');//单独处理css
module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
  },
  output: {
    filename: 'js/[name].[chunkhash:8].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,//处理css样式的loader处理
        use: [ 
          MiniCssExtractPlugin.loader,//单独处理css，把css单独打包出来的配置
          'css-loader' 
        ]
      },
    ]
  },
  plugins: [
    //html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中。
    new HtmlWebpackPlugin({
        filename: 'index.html',//打包后dist 所在文件的名字
        // 这里有小伙伴可能会疑惑为什么不是 '../public/index.html'
        // 我的理解是无论与要用的template是不是在一个目录，都是从根路径开始查找
        template: 'public/index.html',
        inject: 'body',
        minify: {
          removeComments: true,
          collapseWhitespace: true,
        },
    }),
    new MiniCssExtractPlugin({//单独处理css，把css单独打包出来的配置
      filename: 'css/[name].[hash].css',
      chunkFilename: 'css/[id].[hash].css',
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
     static:path.resolve(__dirname, '../dist'),
    // static:'./dist',
    open: true,
    port: 9000,
    // compress: true,
    hot: true
  },
  optimization: {
    runtimeChunk: 'single',
  },
}
